<template>
    <el-dialog v-model="isShow" title="选择引用数据" destroy-on-close width="80%" :z-index="10000">
        <div style="padding: 20px;">
            <el-table :data="data" @selection-change="handleSelectionChange" @row-click="rowClick">
                <el-table-column type="selection" width="50" />
                <el-table-column property="title" label="商品标题" />
                <el-table-column property="remark" label="备注" />
                <el-table-column property="actual_quantity" label="实际数量" />
                <el-table-column property="price" label="采购单价" />
            </el-table>
            <div style="margin: 30px 30px 10px 30px;">
                <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="product_total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { inputNumber } from '/@/utils/tools'
const emits = defineEmits(['edit'])
const changeBatchPrice = (input) => {
    emits('edit', input)
}
let isShow = ref(false)
let multipleSelection = ref([]) //选中的表单
let edit_id = ref(null) 

const props = defineProps({
    modelValue: Boolean,
    purchaserList: Array,
    data: Array,
    product_total: Number
})

watch(
    () => props.modelValue,
    (newVal) => {
        isShow.value = newVal;
    }
);

//表格选中行
const handleSelectionChange = (val) => {
    console.log(val, "val");
    multipleSelection.value = val
}

//表格点击行
const rowClick = (val) => {
    edit_id.value = val.id
    console.log(edit_id.value,"edit_id.value");
}

//改变每页数量
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}

//跳转至某一页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>
